<template>
  <Sign-up>
    <el-form
            ref="forgetPwdForm"
            label-width="80px"
            class="forgetPwdForm"
            :model="forgetPwdForm"
            :rules="forgetPwdRules">
      <el-form-item label="用户名" prop="username">
        <el-input placeholder="请输入用户名" v-model="forgetPwdForm.username"></el-input>
      </el-form-item>
      <el-form-item id="phone" label="手机号">
        <el-input placeholder="请输入手机号" v-model="phone"></el-input>
        <el-button class="verification" type="success" @click="sendOut" :disabled="isDisabled">{{btnText}}</el-button>
      </el-form-item>
      <el-form-item label="验证码">
        <el-input placeholder="请输入验证码" v-model="verificationCode"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input placeholder="请输入密码" type="password" v-model="forgetPwdForm.password"></el-input>
      </el-form-item>
      <el-form-item label="确认密码" prop="pwd">
        <el-input placeholder="请再次密码" type="password" v-model="forgetPwdForm.pwd"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" class="submit_btn" @click="submit_btn">提交</el-button>
      </el-form-item>
      <div @click="$router.back()" class="back">返回</div>
    </el-form>
  </Sign-up>
</template>

<script>
  import SignUp from "../components/SignUp"

  export default {
    name: "ForgetPwd",
    data() {
      const pwd = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('请输入确认密码'))
        } else if (this.forgetPwdForm.pwd !== this.forgetPwdForm.password) {
          return callback(new Error('两次密码不一致'))
        } else {
          callback()
        }
      }
      return {
        forgetPwdForm: {
          pwd: '',
          password: '',
          username: ''
        },
        forgetPwdRules: {
          username: [{required: true, message: '请输入用户名', trigger: 'blur'}],
          password: [{required: true, message: '请输入密码', trigger: 'blur'},],
          pwd: [{validator: pwd, trigger: 'blur', required: true}]
        },
        phone: '',
        verificationCode: '',
        isDisabled: false,
        btnText: '获取验证码'
      }
    },
    components: {
      SignUp
    },
    methods: {
      sendOut() {
        this.isDisabled = true
        let time = 10
        const Time = setInterval(() => {
          time--
          this.btnText = time + '后重新获取'
          if (time == 0) {
            clearInterval(Time)
            this.isDisabled = false
            this.btnText = '获取验证码'
          }
        }, 1000)
        //发送请求获取验证码
        this.$store.dispatch('getSendCode', {phone: this.phone})
          .then(() => {
            console.log(this.$store.state.verificationCode)
            this.$message.success('发送成功')
          })
          .catch(err => {
            this.$message.error('发送失败')
          })
      },
      submit_btn() {
        this.$refs.forgetPwdForm.validate(valid => {
          if (valid) {
            if (this.verificationCode !== this.$store.state.verificationCode) {
              return this.$message.error('验证码不正确')
            }
            this.$store.dispatch('editPassword', this.forgetPwdForm)
              .then(() => {
                this.$message.success('修改成功')
                this.$router.push('/login')
              })
              .catch(err => {
                this.$message.error(err.data)
              })
          } else {
            console.log('error submit!!');
            return false;
          }
        })
      }
    }
  }
</script>

<style scoped lang="less">
  .forgetPwdForm {
    margin-top: 20px;
    background-color: #fff;
    padding: 20px 40px 20px 20px;
    border-radius: 5px;
    box-shadow: 0px 5px 10px #cccc;

    .el-form-item {
      width: 400px;
    }

    .verification {
      font-size: 16px;
      margin-left: 10px;
      height: 34px;
      line-height: 7px;
      margin-top: 5px;
    }
  }

  .submit_btn {
    width: 100%;
  }

  .back {
    color: #409eff;
    text-align: right;
    cursor: pointer;
  }
</style>